<template>

  <div class="zhanshi">

    <!-- top -->
    <div class="top">
      <div class="top-item">
        <pie-chart v-if="flag" width="100%" height="100%" :params="params1" />
      </div>
      <div class="top-item">
        <pie-chart v-if="flag" width="100%" height="100%" :params="params2" />
      </div>
      <div class="top-item">
        <pie-chart v-if="flag" width="100%" height="100%" :params="params3" />
      </div>
    </div>
  </div>

</template>

<script>
import PieChart from './PieChart.vue'
export default {
  name: 'Dabiao',
  components: {
    PieChart
  },
  props: {
    db_obj: {
      type: Object
    }
  },
  data() {
    return {
      params1: {
        title: '有效心率达标率',
        Count: 0,
        userCount: 0
      },
      params2: {
        title: '有效时长达标率',
        Count: 0,
        userCount: 0
      },
      params3: {
        title: '有效负荷达标率',
        Count: 0,
        userCount: 0
      },
      flag: false
    }
  },
  watch: {
    'db_obj': function(val) {
      this.params1.Count = val.hCount
      this.params1.userCount = val.userCount
      this.params2.Count = val.tCount
      this.params2.userCount = val.userCount
      this.params3.Count = val.trimpCount
      this.params3.userCount = val.userCount
    }
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.zhanshi{
  // padding: 30rpx;
  .top{
    overflow: hidden;
    // padding-left: 25px;
    padding-bottom: 40px;
    min-height: 400px;
    .top-item{
      float: left;
      width: 33%;
      height: 386px;
    }
  }
}
@media screen and ( max-width: 1280px ) {
  .top-item{
    width: 33%!important;
    // height: 250px!important;
    height: 300px!important;
  }
}
// }
</style>
